<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>处理用户输入</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <div id="app4">
    <p>{{message}}</p>
    <button type="button" v-on:click="reverseMessage">反转内容</button>
    <button type="button" v-on:click='test' v-if="show">测试</button>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <div id="app4_1">
    <p>{{message}}</p>
    <input type="text" v-model="message">
    <h3 v-html="text"></h3>
    <a :href="url" :title="title" :name="data">{{ url }}</a>
    <ul>
      <li v-for="item in items" @click="toggle">{{item.list}}</li>
    </ul>
  </div>
  <script type="text/javascript">
  // app4
  var app4 = new Vue({
    el: "#app4",
    data: {
      message: 'Hello World!',
      show: false

    },
    methods: {

      reverseMessage: function(e) {
        this.message = this.message.split('').reverse().join('');
      },
      test: function(msg) {
        console.log(this.message);
        // alert(this.message);
      }
    }

  });




  // app4_1
  var app4_1 = new Vue({
    el: '#app4_1',
    data: {
      message: '双向绑定！',
      text: "<em>我是HTML</em>",
      show: true,
      url: 'http://www.360.com/',
      title: 'ceshi',
      data: 'name',
      items: [{

        list: "1"
      }, {

        list: "2"
      }, {

        list: "3"
      }]
    },
    methods: {
      toggle: function() {
       
        console.log(this);
        
      }

    }
  })
  </script>
</body>

</html>
